/*
 * @Author: your name
 * @Date: 2021-05-12 07:55:19
 * @LastEditTime: 2021-05-13 08:33:45
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \api\lib\pages\apis\button\button_home_page.dart
 */
import 'package:flutter/material.dart';

class ImageHomePage extends StatefulWidget {
  @override
  _ImageHomePageState createState() => _ImageHomePageState();
}

class _ImageHomePageState extends State<ImageHomePage> {
  String img =
      "https://tse3-mm.cn.bing.net/th/id/OIP.IdSm_t1f3htXl_hCwtGXLgHaEo?pid=ImgDet&rs=1";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Image配置'),
        ),
        body: Column(
          children: <Widget>[
            // 加载网络图片
            Image(
              image: NetworkImage(img),
              width: 300,
              height: 200,
              // 照片显示策略
              // cover 等比缩放，不会拉伸，多余部分裁剪
              // fill 会拉伸，填满容器
              // contain 默认策略 等比缩放完整显示 不会裁剪
              // fitHeight 高度完整显示 宽度等比缩放，多余部分被裁剪
              // fitWidth 宽度完整显示 高度等比缩放，多余部分被裁剪
              // none 没有加载策略
              fit: BoxFit.contain,
              // 设置图片对齐方式
              alignment: Alignment.topCenter,
              // 设置照片颜色
              color: Color(0xff666666),
              // color与照片的混合模式
              // src 只绘制color 设置的颜色，不会去绘制照片
              // dst 只绘制 照片 不绘制color颜色
              // srcOver 绘制color覆盖在 照片上
              // dstIn 绘制color与照片重叠的部分 color蒙版
              // dstOut 绘制color与照片不重叠的不凡
              // clear 清除内容
              // colorBurn 获取对比度特别强的图像
              // colorDodge 获取曝光度特别强的图像
              // darken 获取暗色图像
              // difference 暗色 曝光度
              // dstOver 绘制照片覆盖在color上
              // exclusion 绘制color覆盖在图片上 color的颜色 更深点
              // hardLight
              // hue 获取黑白图像获取color的色调 获取图片的饱和度与亮度
              // color获取黑白图像 获取color的色调 饱和度 获取照片的亮度
              // lighten
              // luminosity 获取color的亮度 获取照片的色调和饱和度
              // modulate 将color与照片的颜色分量相乘得到的结果 用的还是比较多的
              colorBlendMode: BlendMode.modulate,
              repeat: ImageRepeat.noRepeat,
            ),
            // 效果一直 都是用来驾照照片
            Image.network(img),
            // 渐变效果加载图片
            FadeInImage.assetNetwork(placeholder: "images/icon.png", image: img)
          ],
        ));
  }
}
